<template>
	<div class="admin_index_wrapper">
		<div class="admin_index_count">
			<div class="item" v-for="(item, index) in countStat" :key="index" :style="{ '--numColor': item.color }">
				<dl>
					<dt>{{ item.label }}</dt>
					<dd>{{ (countData[item.field] || 0) | thousandsFilter }}</dd>
				</dl>
				<i :class="item.icon"></i>
			</div>
		</div>
		<browse-chart></browse-chart>
		<article-rank></article-rank>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import browseChart from './browseChart';
import articleRank from './articleRank';
import { getHomeStatData } from '@/api/statistics';
export default {
	components: { browseChart, articleRank },
	data() {
		return {
			countData: {}
		};
	},
	filters: {
		thousandsFilter(input, locale = 'zh-CN') {
			let number = Number(input);
			if (isNaN(number)) return input;
			return new Intl.NumberFormat(locale).format(number);
		}
	},
	computed: {
		...mapGetters(['userInfo']),
		countStat() {
			return [
				{ label: '浏览数', field: 'clickNum', icon: 'el-icon-click-count', color: '#19b21e' },
				{ label: '来访IP数', field: 'ipNum', icon: 'el-icon-ip-address', color: '#0d6ce4' },
				{ label: '书籍总量', field: 'jounalNum', icon: 'el-icon-books', color: '#fa9600' },
				{ label: '文章总量', field: 'newsNum', icon: 'el-icon-article', color: '#3adbe0' }
			];
		}
	},
	mounted() {
		this.getCountStatData();
	},
	methods: {
		//获取首页数量统计
		async getCountStatData() {
			let result = await getHomeStatData().then((res) => res.data);
			if (result.code === '0') {
				this.countData = this.$detailData(result.data);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.admin_index_wrapper {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	padding: 16px;
	height: 100%;
	&:deep(.el-card) {
		display: flex;
		flex-direction: column;
		margin-top: 16px;
		flex-shrink: 0;
	}
	&:deep(.el-card__header) {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 16px 16px 0;
		border-bottom: none;
		font-weight: bold;
		font-size: 15px;
		flex-shrink: 0;
		h4 {
			border-left: solid 4px var(--primary);
			padding-left: 8px;
		}
	}
	&:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		padding: 0 16px 16px;
		overflow: hidden;
		flex: 1;
		.echarts {
			flex: 1;
			overflow: hidden;
		}
	}
}

.admin_index_count {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 16px;
	flex-shrink: 0;
	height: 112px;
	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: solid 1px #ebeef5;
		background-color: #fff;
		border-radius: 4px;
		padding: 24px;
	}
	dt,
	dd {
		line-height: 1;
		font-weight: bold;
	}
	dt {
		color: #303133;
		font-size: 15px;
	}
	dd {
		font-size: 32px;
		margin-top: 15px;
		color: var(--numColor);
	}
	i {
		width: 32px;
		height: 32px;
		padding: 15px;
		font-size: 32px;
		border-radius: 50%;
		background-color: var(--numColor);
		&:before {
			background-image: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.5));
			background-clip: text;
			color: transparent;
		}
	}
}
</style>
